<template>
<div class="newsList-box">
  <div class="newsList">
        <ul>
          <li v-for="(notice, index) in notices" :key="index">
            <a href="javascript:void(0)"@click="showpopup(notice)"> 
              <p class="title">{{notice.title}}</p>
              <p class="title">{{notice.name}}</p>
              <p class="date">{{notice.createTime}}</p>
            </a>
          </li>
        </ul>
  </div>
  <div v-show="popup" @click="closepopup">
    <div class="detail">
      <p>{{notice.content}}</p>  
    </div>
    <div class="over"></div>
  </div>

  <div class="add">
    <button @click="toCreateN">+</button>
  </div>
</div>    
</template>

<script>
import request from '../../utils/request'
  export default{
    data(){
      return {
        notices:'',
        popup: 0,
        notice:''
      }
    },
    methods: {
      showpopup(notice) {
        this.popup = 1
        this.notice = notice
        console.log(notice)
      },
      closepopup() {
        this.popup = 0;
        this.notice = ''
      },
      toCreateN(){ 
        this.userInfo = wx.getStorageSync('userInfo')
        if(wx.getStorageSync('user').isAdmin==1){
          wx.navigateTo({
            url:'/pages/createNotice/main'
          })
        }else if(this.userInfo){
          wx.navigateTo({
              url:'/pages/login/main'
            })
        }else{
          wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            this.userInfo=res.userInfo;
            wx.setStorageSync('userInfo',this.userInfo);
            wx.login({ 
              success: async (res) => {
              //let code = res.code  //有效时长5分钟
              let data ={
                code:res.code,
                img:this.userInfo.avatarUrl,
                wxname:this.userInfo.nickName
              }
              console.log(data);
              let token = await request('/user/getOpenId',{data},'GET');
              //将自定义登陆状态缓存到storage中 
              wx.setStorageSync('token',token)
              console.log(token)
              }             
            })  
            wx.navigateTo({
              url:'/pages/login/main'
            })
        },
        fail: (res) => {
            this.userInfo={};
            console.log(res);
          },
      })

      }
        
      },
    },
    async mounted() {

      this.notices = await request('/notice/list','GET')

      console.log(this.notices)
    },
  }
</script>

<style scoped>
.newsList-box .newsList{
  width: 85%;
  margin:auto ;
  
}

.newsList-box .newsList ul li{
  margin-top: 23px;
  background: rgb(226, 78, 78);
  box-shadow: -10px 10px rgb(180, 100, 100);
  opacity: .7;
  border-radius: 10px;
}

.newsList-box .newsList ul li .title{
  font-size: 40rpx;

}

.newsList-box .newsList ul li .date{
  font-size: 30rpx;
  padding-left: 178px;
  
}


.detail {
  position: fixed;
  font-size: 24px;
  height: auto;
  width: 240px;
  background-color: gold;
  border-radius: 0.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; 
}
.detail p{
  word-wrap:break-word;
}
.over {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  filter: alpha(opacity=70);
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #111111;
}

.add{
  position:fixed;
  z-index: 1000;
  top:75%;
  left:75%;
  width: 70px;
  height: 50px;
}
.add button{
  background-color: rgb(214, 187, 187);
  border-radius: 50px;
  padding: 10px;
  opacity: .6;
}


</style>
